<template>
	<view class="list w-100 ss-p-20">
		<template v-for="(item,index) in state.list" :key="index">
			<view class="item ss-m-t-20 ss-p-10" @click="jump(item.url)">
				<image :src="item.src" mode="aspectFit" class="img"></image>
				<view class="title"> {{item.name}} </view>
			</view>
		</template>
		
	</view>
</template>

<script setup>
	import { reactive, computed } from 'vue';
	import sheep from '@/sheep';
	
	const props = defineProps({
		list:{
			type:Array,
			default:[],
		}
	})
	
	const jump=(url)=>{
		sheep.$router.go(url);
	}
	
	const state = reactive({
		list:[
			{id:1,name:"宠物洗澡",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241443148228.png",url:""},
			{id:2,name:"宠物美容",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241443145578.png",url:""},
			{id:3,name:"宠物疫苗",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241443141601.png",url:""},
			{id:4,name:"宠物医疗",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241443141813.png",url:""},
			{id:5,name:"宠物疗养",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241443149081.png",url:""},
			
			{id:6,name:"驱虫",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241522149277.png",url:""},
			{id:7,name:"宠物体检",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241522147089.png",url:""},
			{id:8,name:"洁牙",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241522148089.png",url:""},
			{id:9,name:"宠物寄养",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241522143833.png",url:""},
			{id:10,name:"食用用品",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241524275117.png",url:"",url:""},
			
			{id:11,name:"购宠",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241522147605.png",url:""},
			{id:12,name:"撸宠",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241524274513.png",url:""},
			{id:13,name:"宠物乐园",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241524276885.png",url:""},
			{id:14,name:"摄影",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241524279802.png",url:""},
			{id:15,name:"宠物训练",src:"https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407241524279524.png",url:""},
			]
	})
	
</script>

<style lang="scss" scoped>
.list{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items: center;
	.item{
		width:calc((100vw - 140rpx) / 5);
		.img{
			width:calc((100vw - 140rpx) / 5);
			height:calc((100vw - 140rpx) / 5);
		}
		.title{
			display: flex;
			justify-content: center;
			align-items: center;
			width:calc((100vw - 140rpx) / 5);
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0em;
			color: #3D3D3D;
		}
	}
}
.w-100{
	width:100%;
}
</style>
